<template>
  <el-card
    class="box-card"
    style="background-color: #fff; margin-left: 1%; width: 98%"
  >
    <p style="border-bottom: 1px solid #ebeef5; padding-bottom: 20px">
      账号列表
    </p>
    <div style="padding: 10px">
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="checkedItem"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="账号" width="120">
          <template slot-scope="obj">
            <el-input
              v-if="obj.row.showEdit"
              v-model="obj.row.account"
            ></el-input>
            <span v-else>{{ obj.row.account }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户组" width="120">
          <template slot-scope="obj">
            <el-input
              v-if="obj.row.showEdit"
              v-model="obj.row.userGroup"
            ></el-input>
            <span v-else>{{ obj.row.userGroup }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ctime" label="创建时间" width="160">
        </el-table-column>
        <el-table-column label="操作">
          <!-- slot-scope: 可以注入每一行的数据， row: 当前这行的数据  $index: 索引 -->
          <template slot-scope="obj">
            <el-button
              v-if="obj.row.showEdit"
              size="mini"
              @click="finish(obj.row)"
              >完成</el-button
            >
            <el-button v-else size="mini" @click="celledit(obj.row)"
              >编辑</el-button
            >
            <el-button @click="clickdel(obj.row)" size="mini" type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 翻页 -->
      <el-pagination
        style="height: 50px; padding-top: 15px; margin-bottom: 10px"
        @size-change="sizeChange"
        @current-change="curChange"
        :current-page="currentPage"
        :page-sizes="[4, 6, 8, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <div style="margin-bottom: 10px">
        <template>
          <el-button @click="clickBatchdel(tableChecked)" type="danger"
            >批量删除</el-button
          >
          <el-button @click="clickDeselect" type="primary">取消选择</el-button>
        </template>
      </div>
    </div>
  </el-card>
</template>

<script>
import { userList, userdel, batchdel, edit } from "@/apis/users";
import { getChinaTime } from "@/utils/utils";
export default {
  data() {
    return {
      currentPage: 1, //当前页
      pagesize: 4, //每页显示条数
      list: [], //用户列表
      total: 0, //总条数
      tableChecked: [], //选中项的数据
      ids: [], //选中的table项的id
    };
  },
  created() {
    this.reqtableData(); //初始化调用
  },

  methods: {
    reqtableData() {
      userList({
        currentPage: this.currentPage,
        pageSize: this.pagesize,
      }).then((res) => {
        //先把数据处理好，在赋值给data
        for (let obj of res.data.data) {
          obj.ctime = getChinaTime(obj.ctime);
          obj.showEdit = false;
        }
        this.list = res.data.data;
        this.total = res.data.total;
        // console.log(res);
      });
    },

    //点击当前页
    curChange(val) {
      console.log(val);
      this.currentPage = val;
      this.reqtableData();
    },

    //当前页输入框
    sizeChange(val) {
      this.pagesize = val;
      this.reqtableData();
    },

    //删除
    clickdel(row) {
      // console.log(row.id);
      this.$confirm("此操作将永久删除该信息, 是否继续?", "甜品小屋贴心提示您", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          //点击确定发送ajax
          userdel({
            id: row.id,
          }).then((res) => {
            if (res.data.code === 0) {
              this.reqtableData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //批量删除
    clickBatchdel(tableChecked) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        // console.log(tableChecked);
        for (let obj of tableChecked) {
          this.ids.push(obj.id);
        }
        console.log(this.ids);

        //发送ajax
        batchdel({
          ids: JSON.stringify(this.ids),
        })
          .then((res) => {
            // console.log(res);
            if (res.data.code === 0) {
              this.reqtableData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },

    //选中的项
    checkedItem(val) {
      // console.log(val);
      this.tableChecked = val;

      // console.log(this.tableChecked);
    },

    //取消选择
    clickDeselect() {
      this.$refs.multipleTable.clearSelection();
    },

    //编辑
    celledit(row) {
      row.showEdit = true;
    },

    //完成
    finish(row) {
      row.showEdit = false;
      edit(row).then((res) => {
        if (res.data.code === 0) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>